<template>
  <div class="h-content bg-light-700">
    <div class="box w-100px h-100px bg-green-300">100*100</div>
    <van-cell-group>
      <van-cell title="正常请求 ✅" is-link @click="handleSuccessFetch" />
      <van-cell title="异常请求 ❌" is-link @click="handleErrorFetch" />
      <van-cell title="多接口请求 🌈" is-link @click="handleMoreFetch" />
    </van-cell-group>
    <div>
      {{ content }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { api_home } from '@/api/api_home'
import { Resutl_Promise } from '@/types'
const result = ref('')
const content = ref('')
const handleSuccessFetch = async () => {
  try {
    //异步请求 ✅
    const res: Resutl_Promise = await api_home.success_fetch()

    if (res.success && res.results) {
      result.value = res.msg
    }
  } catch (error) {
    console.log('error', error)
  }
}

const handleErrorFetch = async () => {
  try {
    //异步错误请求❌
    const res: Resutl_Promise = await api_home.error_fetch()
    if (res.success && res.results) {
      result.value = res.msg
    }
  } catch (error) {
    console.log('error', error)
  }
}
// 多接口请求  🌈
const handleMoreFetch = async () => {
  try {
    const res_all = await Promise.allSettled([api_home.all_fetch1(), api_home.all_fetch2()])
    res_all.forEach(item => {
      if (item.status === 'fulfilled') {
        const result = item.value as Resutl_Promise
        if (result.results) {
          content.value = JSON.stringify(result.results)
        }
      }
    })
  } catch (error) {
    console.log('error-more', error)
  }
}
</script>

<style lang="less" scoped>
.h-content {
  flex: 1;
  .box {
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 23px;
  }
  :deep(.van-cell) {
    padding: 10px 10px;
  }
}
</style>
